import React from "react";
import { testData, testData2 } from "./demo";
import _ from "lodash";

const YourTableComponent = () => {
  const transformData = (data) => {
    const result = {};
    data.forEach((arr) => {
      const key = arr[1].value;
      let valueArr = [];
      if (arr[arr.length - 1].children) {
        valueArr = _.flatMapDeep(arr[arr.length - 1].children, (item) => {
          if (item.children) {
            return _.map(item.children, (child) => child.columnValue);
          } else {
            return item.columnValue;
          }
        });
      } else {
        valueArr.push(arr[arr.length - 1].columnValue);
      }

      if (!result[key]) {
        result[key] = valueArr;
      } else {
        result[key] = [...result[key], ...valueArr];
      }
    });
    return result;
  };

  console.log(
    "%c 🥟  transformData(testData): ",
    "font-size:20px;background-color: #E41A6A;color:#fff;",
    transformData(testData)
  );

  console.log(
    "%c 🥟  transformData(testData2): ",
    "font-size:20px;background-color: #E41A6A;color:#fff;",
    transformData(testData2)
  );

  return <></>;
};

export default YourTableComponent;
